<template>
  <!-- 定义按钮 -->
  <button :class="['btn', { 'btn-disabled': disabled }]" @click="clickHandler">
    <!-- 插入按钮内容 -->
    <slot></slot>
  </button>
</template>
<script>
export default {
  // 组件名称
  name: "dvButton",

  // 接收外部传入的 props
  props: {
    // 是否禁用按钮，默认不禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    // 按钮点击事件处理函数
    clickHandler(e) {
      // 当按钮可用时，才触发按钮点击事件并向外部组件发射 click 事件
      if (!this.disabled) {
        this.$emit("click", e);
      }
    }
  }
};
</script>

<style scoped>
.btn {
  /* 按钮样式 */
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all .3s ease-in-out;
  margin: 10px;
  cursor: pointer;
  font-size: 24px;
  background-color: #00bfff;
}

.btn:hover:not(.btn-disabled) {
  /* 鼠标悬停时的按钮样式 */
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn:focus:not(.btn-disabled) {
  /* 按钮聚焦时的样式 */
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.btn-disabled {
  /* 禁用按钮时的样式 */
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
